<template>
  <div class="articlesItem" @click="toArticle" v-if="article">
    <div class="left">
      <van-image
        width="168px"
        height="auto"
        lazy-load
        radius="10px"
        :src="article.resource.cover"
      />
      <div class="time">{{ article.resource.duration | time }}</div>
    </div>
    <div class="right">
      <div class="title">{{ article.resource.title }}</div>
      <div class="publish_time">
        {{ article.resource.publish_time | timestampToTime }}
      </div>
      <div class="buttom">
        <div class="sub">
          {{ article.resource.count.count_like | formatter }}&nbsp;喜欢
          &nbsp;·&nbsp;
          {{ article.resource.count.count_view | formatter }}&nbsp;观看
        </div>
        <div class="more">
          <svg
            t="1677136516616"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4040"
            width="16"
            height="16"
          >
            <path
              d="M512 704c35.2 0 64 28.8 64 64s-28.8 64-64 64-64-28.8-64-64 28.8-64 64-64z m-64-192c0 35.2 28.8 64 64 64s64-28.8 64-64-28.8-64-64-64-64 28.8-64 64z m0-256c0 35.2 28.8 64 64 64s64-28.8 64-64-28.8-64-64-64-64 28.8-64 64z"
              p-id="4041"
              fill="#999999"
            ></path>
          </svg>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  props: ["article"],
  filters: {
    time: function (text) {
      let minute =
        Math.floor(text / 60) < 10
          ? `0${Math.floor(text / 60)}`
          : Math.floor(text / 60);
      let second = text % 60 < 10 ? `0${text % 60}` : text % 60;
      return `${minute}'${second}''`;
    },
    formatter: function (value) {
      if (value >= 1000 && value < 10000) {
        value = (value / 1000).toFixed(1) + "k";
      }
      if (value >= 10000 && value < 10000000) {
        value = (value / 10000).toFixed(1) + "w";
      }
      return value;
    },
    timestampToTime: function (timestamp) {
      if (timestamp === 0 || timestamp == null) {
        return "";
      } else {
        var date = new Date(timestamp * 1000);
        var Y = date.getFullYear() + "-";
        var M =
          (date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1) + "-";
        var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        return Y + M + D;
      }
    },
  },
  methods: {
    toArticle() {
      this.$router.push({
        path: "/article",
        query: { id: this.article.resource.id },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.articlesItem {
  //   height: 50px;
  padding: 15px 0;
  margin: 0 15px;
  display: flex;
  align-items: center;
  // justify-content: space-between;
  border-bottom: 1px solid #f2f2f2;

  .left {
    position: relative;
    margin-right: 15px;

    .time {
      position: absolute;
      right: 10px;
      bottom: 8px;
      text-shadow: 1px 1px #000;
      font-size: 13px;
      color: white;
    }
  }

  .right {
    display: flex;
    flex-direction: column;
    width: 100%;

    .title {
      font-size: 15px;
      font-weight: bold;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      margin-bottom: 5px;
    }

    .publish_time {
      font-size: 12px;
      color: #999;
      margin-bottom: 9px;
    }

    .buttom {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .sub {
        display: flex;
        align-items: center;
        font-size: 12px;
      }

      .more {
        height: 16px;
      }
    }
  }
}
</style>
